<aside v-if="menu" class="main-sidebar elevation-4" :class="sidebarSkin">
    <router-link to="/" class="brand-link">
        <pf-image
            src="assets/img/logo.png"
            alt="AdminLTE Logo"
            class="brand-image"
            height="33"
            width="33"
            rounded
            style="opacity: 0.8"
        ></pf-image>
        <span class="brand-text font-weight-light">AdminLTE 3</span>
    </router-link>

    <div class="sidebar">
        <div class="user-panel mt-3 pb-3 mb-3 d-flex">
            <div class="image">
                <pf-image
                    :src="currentUser?.photoURL"
                    fallbackSrc="assets/img/default-profile.png"
                    class="img-circle"
                    alt="User Image"
                    width="34"
                    height="34"
                    rounded
                ></pf-image>
            </div>
            <div class="info">
                <router-link to="/profile" class="d-block">
                    {{currentUser?.email}}
                </router-link>
            </div>
        </div>

        <div class="form-inline">
            <app-sidebar-search :menu="menu"></app-sidebar-search>
        </div>

        <nav class="mt-2">
            <ul
                class="nav nav-pills nav-sidebar flex-column"
                data-widget="treeview"
                role="menu"
                data-accordion="false"
            >
                <app-menu-item
                    v-for="item in menu"
                    :menuItem="item"
                ></app-menu-item>
            </ul>
        </nav>
    </div>
</aside>
